<template>
	<view class="cpupons-manager">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">优惠券管理</block>
		</cu-custom>
		<view class="cpupons-rules">
			<view class="label-bg first-bg"></view>
			<view class="base-items items-bg">
				<view class="base-title first-title"><text class="title-text items-bg">优惠券名称</text></view>
				<view class="base-infor">
					<input placeholder="请输入名称" type="text" v-model="form.title"/>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items items-bg">
				<view class="base-title items-bg"><text class="title-text items-bg">数量设置</text></view>
				<view class="base-infor">
					<radio-group>
						<radio class='red' :class="form.is_permanent==1?'checked':''" :checked="form.is_permanent==1?true:false" @click="changeCate(1)"></radio>不限<view style="width: 80rpx;display: inline-block;"></view>
						<radio class='red' :class="form.is_permanent==0?'checked':''" :checked="form.is_permanent==0?true:false" @click="changeCate(0)"></radio>限量
					</radio-group>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items" v-if="form.is_permanent==0">
				<view class="base-title"><text class="title-text items-bg">发券总数</text></view>
				<view class="base-infor">
					<input placeholder="输入需要发放的数量" type="number" v-model="form.total_count"/>
					<text class="cuIcon cuIcon-questionfill" @click="showTips('最大数量不超过999999999')"></text>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items">
				<view class="base-title"><text class="title-text items-bg">优惠券类型</text></view>
				<view class="base-infor">
					<radio-group>
						<radio class='red' :class="form.type==2?'checked':''" checked="true" @click="changeType(2)"></radio>满减<view style="width: 80rpx;display: inline-block;"></view>
						<!-- <radio class='red' :class="form.type==2?'checked':''" :checked="form.type==2?true:false" @click="changeType(2)"></radio>满减<view style="width: 80rpx;display: inline-block;"></view> -->
						<!-- <radio class='red' :class="form.type==1?'checked':''" :checked="form.type==1?true:false" @click="changeType(1)"></radio>定额券 -->
					</radio-group>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items">
				<view class="base-title"><text class="title-text items-bg">面额</text></view>
				<view class="base-infor">
					<input placeholder="请输入优惠额度" type="number" v-model="form.coupon_price" disabled/>
					<text class="">元</text>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items" v-if="form.type=='2'">
				<view class="base-title"><text class="title-text items-bg">使用门槛</text></view>
				<view class="base-infor">
					<text class="rules-tips">消费满</text>
					<input placeholder="其输入满减门槛" type="number" v-model="form.use_min_price"/>
					<text class="rules-tips">元，可使用</text>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items">
				<view class="base-title"><text class="title-text items-bg">结束时间</text></view>
				<view class="base-infor">
					<picker class="date-items" mode="date" :value="form.coupon_time" :start="startDate" :end="endDate" @change="bindDateChange">
					    <view class="uni-input">{{form.coupon_time}}</view>
					</picker>
				</view>
				<view class="label-bg"></view>
			</view>
			<view class="base-items">
				<view class="base-title"><text class="title-text items-bg">活动状态</text></view>
				<view class="base-infor">
					<radio-group>
						<radio class='red' :class="form.status==1?'checked':''" :checked="form.status==1?true:false" @click="changeStatus(1)"></radio>开启<view style="width: 80rpx;display: inline-block;"></view>
						<radio class='red' :class="form.status==0?'checked':''" :checked="form.status==0?true:false" @click="changeStatus(0)"></radio>关闭
					</radio-group>
				</view>
				<view class="label-bg"></view>
				
			</view>
		</view>
		<view class="cpupons-footer" @click="sublimtAct">
			<button>确定</button>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import shop from '@/api/shop';
	
	
	export default {
		data() {
			const currentDate = this.getDate({
			    format: true
			});
			return {
				form:{
					title:'',
					coupon_time: currentDate,
					type:2,
					is_permanent:1,
					coupon_price:10,
					status:1,
					total_count:0,
					use_min_price:0,
					sort:0,
					
				},
			}
		},
		computed: {
			...mapState(['userLocation', 'userInfo','outPutUid']),
		    startDate() {
		        return this.getDate('start')
		    },
		    endDate() {
		        return this.getDate('end')
		    }
		},
		methods: {
			inputChange() { //输入框值改变
			    this.pageIndex = this.pageIndex.replace(/[^\d]/g, '')
			},
			bindDateChange: function(e) {
				this.form.coupon_time = e.target.value
			},
			changeCate(param){
				this.form.is_permanent = param;
			},
			changeType(param){
				this.form.type = param;
			},
			changeStatus(param){
				this.form.status = param;
			},
			showTips(msg){
				uni.showModal({
					title:'提示',
					content:msg,
					showCancel:false,
					success:function(res){
						console.log(res);
					}
				})
			},
			getDate(type) {
		        const date = new Date();
		        let year = date.getFullYear() + 1;
		        let month = date.getMonth() + 1;
		        let day = date.getDate();
		        		
		        if (type === 'start') {
		            year = year - 60;
		        } else if (type === 'end') {
		            year = year + 2;
		        }
		        month = month > 9 ? month : '0' + month;;
		        day = day > 9 ? day : '0' + day;
		        return `${year}-${month}-${day}`;
		    },
			
			sublimtAct(){
				if(this.form.type==2&&this.form.use_min_price==0){
					this.showTips('无效的满减门槛');
					return false;
				}
				if(this.form.is_permanent==0&&this.form.total_count==0){
					this.showTips('请输入有效的优惠券数量');
					return false;
				}
				if (!/^[0-9]+$/.test(this.form.total_count)) {
				   this.showTips('优惠券数量只能输入数字');
				}
				if (!/^[0-9]+$/.test(this.form.use_min_price)) {
				   this.showTips('使用门槛只能输入数字');
				}
				if (!/^[0-9]+$/.test(this.form.coupon_price)) {
				   this.showTips('优惠券面值只能输入数字');
				   return false;
				}
				shop.setShopCoupon(this.form).then(res => {
					let msg = "优惠券发放失败"
					if(res.code == 1){
						msg = "优惠券已发放";
						uni.showModal({
							title:'提示',
							content:res.msg,
							showCancel:false,
							success:function(confirm){
								uni.navigateBack({
									delta:1,
								})
							}
						})
					}else{
						console.log(res.data);
						uni.showModal({
							title:'提示',
							content:res.msg,
							showCancel:false,
							success:function(confirm){
								// uni.navigateBack({
								// 	delta:1,
								// })
							}
						})
					}
					
					return false;
				})
			},
		}
	}
</script>

<style lang="less">
	.cpupons-manager{
		width: 100vw;
		background-color: #fff;
		min-height: 100vh;
		font-family: 'SimHei';
		color: #868686;
		font-size: 28rpx;
		.cpupons-rules{
			.items-bg{
				background-color: #ff5643;
			}
			.base-items{
				padding: 0 25rpx;
			}
			.base-title{
			    background: #fff;
			    height: 80rpx;
			    line-height: 80rpx;
			    padding: 0 20rpx;
			}
			.first-title{
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
			    padding-top: 20rpx;
			}
			.title-text{
			    height: 50rpx;
			    line-height: 50rpx;
			    display: inline-block;
			    width: 200rpx;
			    text-align: center;
			    border-top-right-radius: 25rpx;
			    border-bottom-right-radius: 25rpx;
			    color: #ffffff;
			}
			.base-infor{
			    background: #ffffff;
			    padding: 15rpx 20rpx;
				padding-bottom: 25rpx;
			    min-height: 120rpx;
				input{
				    border: 1rpx solid #c8c4c5;
				    width: 280rpx;
				    height: 60rpx;
				    line-height: 60rpx;
				    display: inline-block;
				    margin-right: 20rpx;
				    float: left;
				}
				text{
				    height: 60rpx;
				    display: inline-block;
				    line-height: 60rpx;
				    float: left;
				}
				.cuIcon{
				    color: #c8c4c5;
				    font-size: 50rpx;
				}
			}
			.label-bg{
				height: 15rpx;
				background-color: #ececec;
			}
			.first-bg{
				height: 30rpx;
				background-color: #ff5643;
			}
			.date-items{
				float: left;
			    width: 200rpx;
			    text-align: center;
			    height: 60rpx;
			    line-height: 60rpx;
			    border: 1rpx solid #ededed;
			    margin: 0 10rpx;
			}
			.date-tips{
				margin: 0 20rpx;
			}
		}
		.rules-tips{
			float: left;
			margin-right: 20rpx;
		}
		.datePart{
		    border: 1rpx solid #c8c4c5;
		    width: 150rpx;
		    text-align: center;
		}
		.dateInfor{
		    min-height: 80rpx;
		}
		.cpupons-footer{
			padding: 25rpx;
			button{
				background-color: #ff5643;
				color: #fff;
			}
		}
	}
</style>
